@keyframes scroll_bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes scroll_show {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue), 10%, 70%);
  --fg: hsl(var(--hue), 10%, 10%);
  --focus: hsl(var(--hue), 90%, 60%);
  --focus-t: hsla(var(--hue), 90%, 60%, 0);
  --red-orange: hsl(11, 90%, 50%);
  --orange: hsl(21, 90%, 50%);
  --yellow-orange: hsl(31, 90%, 50%);
  --blue: hsl(198, 90%, 50%);
  --purple: hsl(287, 40%, 70%);
  --trans-dur: 0.3s;
  font-size: calc(20px + 60 * (100vw - 280px) / 3560);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  height: 100vh;
  background-color: var(--bg);
  color: var(--fg);
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

button {
  color: var(--fg);
  font: 1em/1.5 "Asap Condensed", sans-serif;
}

main {
  display: flex;
  overflow-x: hidden;
  padding: 1.5em 0;
  width: 100vw;
  height: 100vh;
}

.tb1 {
  --display-dim: 0.2;
  border-radius: 0.75em;
  box-shadow: 0.125em 0.125em 0.125em hsl(var(--hue), 10%, 90%) inset, -0.0625em -0.0625em 0.1875em hsl(var(--hue), 10%, 50%) inset, 0 0 0.5em hsla(0, 0%, 0%, 0.5);
  margin: auto;
  padding: 1em;
  width: 14.25em;
  height: 15.75em;
}
.tb1, .tb1__cell {
  background-color: hsl(var(--hue), 10%, 80%);
}
.tb1__grid {
  background-color: hsl(var(--hue), 10%, 10%);
  border-radius: 0.25em;
  box-shadow: -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 90%), 0.0625em 0.0625em 0.125em hsl(var(--hue), 10%, 50%);
  display: grid;
  gap: 0.25em;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr repeat(2, 3.75em);
  padding: 0.25em;
  width: 100%;
  height: 100%;
  transition: box-shadow var(--trans-dur);
}
.tb1__bar {
  background-color: currentColor;
  height: 0.125rem;
  opacity: var(--display-dim);
  transition: opacity calc(var(--trans-dur) / 2);
}
.tb1__bar--blue {
  background-color: var(--blue);
}
.tb1__bar--purple {
  background-color: var(--purple);
}
.tb1__bar--on {
  opacity: 1;
}
.tb1__bar--tall {
  height: 0.375em;
}
.tb1__bar--25p {
  width: 25%;
}
.tb1__bar--30p {
  width: 30%;
}
.tb1__bar--35p {
  width: 35%;
}
.tb1__bar--40p {
  width: 40%;
}
.tb1__bar--45p {
  width: 45%;
}
.tb1__bar--50p {
  width: 50%;
}
.tb1__bar--55p {
  width: 55%;
}
.tb1__bar--60p {
  width: 60%;
}
.tb1__bar--65p {
  width: 65%;
}
.tb1__bar--70p {
  width: 70%;
}
.tb1__bars {
  display: flex;
  gap: 0.125em;
  flex-direction: column-reverse;
}
.tb1__bars + .tb1__bars {
  align-items: flex-end;
}
.tb1__button, .tb1__dial {
  border-radius: 50%;
  margin: auto;
  width: 2.25em;
  height: 2.25em;
}
.tb1__button, .tb1__dial-control {
  display: flex;
}
.tb1__button {
  box-shadow: 0.0625em 0 0.125em hsl(var(--hue), 10%, 70%) inset, -0.0625em 0 0.125em hsl(var(--hue), 10%, 90%) inset, 0.0625em 0 0.125em hsl(var(--hue), 10%, 85%), -0.25em 0 0.375em hsla(0, 0%, 0%, 0.4);
  transition: all var(--trans-dur);
}
.tb1__cell {
  border-radius: 0.25em;
  box-shadow: 0 0 0 0.125em var(--focus-t), 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 90%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 50%) inset;
  display: flex;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur), transform calc(var(--trans-dur) / 3) cubic-bezier(0.65, 0, 0.35, 1);
}
.tb1__cell[type=button] {
  cursor: pointer;
}
.tb1__cell[type=button]:active {
  transform: scale(0.95);
}
.tb1__cell[type=button]:focus-visible {
  box-shadow: 0 0 0 0.125em var(--focus), 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 90%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 50%) inset;
}
.tb1__cell--display {
  background-image: linear-gradient(80deg, hsl(var(--hue), 10%, 15%) 49%, hsla(var(--hue), 10%, 15%, 0) 50%), linear-gradient(hsl(var(--hue), 10%, 25%), hsl(var(--hue), 10%, 30%));
  box-shadow: 0 0 0.125em hsl(var(--hue), 10%, 30%) inset !important;
  display: grid;
  grid-column: 3;
  grid-row-start: 2;
  grid-row-end: 4;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 0.75em 1fr;
  padding: 0.5em;
  text-transform: uppercase;
}
.tb1__cell--speakers {
  display: grid;
  grid-template-columns: repeat(15, 0.625em);
  grid-template-rows: repeat(7, 0.625em);
  align-content: center;
  justify-content: center;
  place-items: center;
  grid-column-start: 1;
  grid-column-end: 4;
}
.tb1__cell--speakers .item {
  width: 50%;
  height: 50%;
  background-color: #17181c;
  border-radius: 50px;
  box-shadow: 0 -0.0625em 0.0625em #abafba, 0 0.0625em 0.0625em #e3e4e8;
  transition: box-shadow 0.5s;
}
.tb1__cell--speakers .item:nth-child(25) {
  grid-column: 1;
}
.tb1__cell--speakers .item:nth-child(12), .tb1__cell--speakers .item:nth-child(70) {
  grid-column: 2;
}
.tb1__cell--speakers .item:first-child, .tb1__cell--speakers .item:nth-child(83) {
  grid-column: 3;
}
.tb1__dial {
  box-shadow: 0.0625em 0 0.125em hsl(var(--hue), 10%, 70%) inset, -0.0625em 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0.0625em 0 0.0125em hsl(var(--hue), 10%, 90%), -0.25em 0 0.375em hsla(0, 0%, 0%, 0.4);
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur), color var(--trans-dur);
}
.tb1__dial-control {
  --shadow-before-rotate: 0;
  --shadow-after1-x: 1;
  --shadow-after1-y: 1;
  --shadow-after2-x: -1;
  --shadow-after2-y: -1;
  background-color: transparent;
  border-radius: inherit;
  box-shadow: 0 0 0 0.125em var(--focus-t);
  cursor: grab;
  position: relative;
  transition: box-shadow var(--trans-dur);
  width: 100%;
  height: 100%;
}
.tb1__dial-control:active {
  cursor: grabbing;
}
.tb1__dial-control:focus-visible {
  box-shadow: 0 0 0 0.125em var(--focus);
}
.tb1__dial-control::before, .tb1__dial-control::after {
  content: "";
  background: var(--blue);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.tb1__dial-control::before {
  border-radius: 50%;
  box-shadow: 0.0625em 0 0.0625em hsla(0, 0%, 0%, 0.3) inset, -0.0625em 0 0.0625em hsla(0, 0%, 100%, 0.3) inset;
  width: 1.75em;
  height: 1.75em;
  transform: translate(-50%, -50%) rotate(calc(1deg * var(--shadow-before-rotate)));
}
.tb1__dial-control::after {
  border-radius: 0.1875em;
  box-shadow: 2px 0 0 hsl(var(--hue), 10%, var(--shadow-after1-x)) inset, 0 2px 0 hsl(var(--hue), 10%, var(--shadow-after1-y)) inset, -2px 0 0 hsl(var(--hue), 10%, var(--shadow-after2-x)) inset, 0 -2px 0 hsl(var(--hue), 10%, var(--shadow-after2-y)) inset;
  opacity: 0.4;
  width: 0.375em;
  height: 1.25em;
}
.tb1__cell[type=button], .tb1__dial-control {
  outline: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.tb1__display-label {
  display: block;
  font-size: 0.5em;
  line-height: 2;
  color: hsl(0, 0%, 100%);
}
.tb1__icon {
  display: block;
  margin: auto;
  width: 1.5em;
  height: 1.5em;
}
.tb1__rec {
  display: flex;
  align-items: center;
  gap: 0.375em;
  grid-column-start: 1;
  grid-column-end: 3;
}
.tb1__rec-light {
  border-radius: 50%;
  box-shadow: 0 0 0 0.25em var(--orange) inset;
  display: block;
  opacity: var(--display-dim);
  width: 0.625rem;
  height: 0.625rem;
  transition: opacity calc(var(--trans-dur) / 2);
}
.tb1__rec-light--on {
  opacity: 1;
}
.tb1__sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
}